import {
  FontAwesome,
  MaterialCommunityIcons,
  MaterialIcons,
} from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';

import ModalScreen from '../screens/ModalScreen';
import NotFoundScreen from '../screens/NotFoundScreen';
import CourseScreen from '../screens/CourseScreen';
import ClubScreen from '../screens/ClubScreen';
import LinkingConfiguration from './LinkingConfiguration';
import { RootStackParamList, RootTabParamList } from '../types';
import ProfileScreen from '../screens/ProfileScreen';
import CourseInfoScreen from '../screens/course/CourseInfoScreen';
import VideoCourseScreen from '../screens/course/VideoCourseScreen';
import LiveCourseScreen from '../screens/club/LiveCourseScreen';

export default function Navigation() {
  return (
    <NavigationContainer linking={LinkingConfiguration}>
      <RootNavigator />
    </NavigationContainer>
  );
}

const RootStack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <RootStack.Navigator>
      <RootStack.Screen
        name="RootTab"
        component={BottomTabNavigator}
        options={{ headerShown: false }}
      />
      <RootStack.Screen
        name="CourseInfo"
        component={CourseInfoScreen}
        options={{
          headerShown: false,
        }}
      />
      <RootStack.Screen
        name="VideoCourse"
        component={VideoCourseScreen}
        options={{
          headerShown: false,
        }}
      />
      <RootStack.Screen
        name="LiveCourse"
        component={LiveCourseScreen}
        options={{
          headerShown: false,
        }}
      />
      <RootStack.Screen
        name="NotFound"
        component={NotFoundScreen}
        options={{ title: 'Oops!' }}
      />
      <RootStack.Group screenOptions={{ presentation: 'modal' }}>
        <RootStack.Screen name="Modal" component={ModalScreen} />
      </RootStack.Group>
    </RootStack.Navigator>
  );
}

const BottomTab = createBottomTabNavigator<RootTabParamList>();

function BottomTabNavigator() {
  return (
    <BottomTab.Navigator initialRouteName="Course">
      <BottomTab.Screen
        name="Course"
        component={CourseScreen}
        options={{
          title: '课程',
          tabBarIcon: ({ color }) => (
            <TabBarIconMCI name="google-classroom" color={color} />
          ),
        }}
      />
      <BottomTab.Screen
        name="Club"
        component={ClubScreen}
        options={{
          title: '俱乐部',
          headerTitle: '直播俱乐部',
          tabBarIcon: ({ color }) => (
            <TabBarIconMI name="group-work" color={color} />
          ),
        }}
      />
      {/*<BottomTab.Screen*/}
      {/*  name="PersonalTraining"*/}
      {/*  component={PersonalTrainingScreen}*/}
      {/*  options={{*/}
      {/*    title: '私教',*/}
      {/*    tabBarIcon: ({ color }) => (*/}
      {/*      <TabBarIconMCI name="yoga" color={color} />*/}
      {/*    ),*/}
      {/*  }}*/}
      {/*/>*/}
      <BottomTab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          title: '我的',
          tabBarIcon: ({ color }) => (
            <TabBarIconMI name="self-improvement" color={color} />
          ),
        }}
      />
    </BottomTab.Navigator>
  );
}

/**
 * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function TabBarIconFA(props: {
  name: React.ComponentProps<typeof FontAwesome>['name'];
  color: string;
}) {
  return <FontAwesome size={30} style={{ marginBottom: -3 }} {...props} />;
}

function TabBarIconMCI(props: {
  name: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
  color: string;
}) {
  return (
    <MaterialCommunityIcons size={30} style={{ marginBottom: -3 }} {...props} />
  );
}

function TabBarIconMI(props: {
  name: React.ComponentProps<typeof MaterialIcons>['name'];
  color: string;
}) {
  return <MaterialIcons size={30} style={{ marginBottom: -3 }} {...props} />;
}
